<!--使用Ant Design Charts 做的仪表盘-->
<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
    //import RingChart from './RingChart'
    import {Gauge} from '@antv/g2plot';

    export default {
        name: "antDashBoard",
        components: {},

        data() {
            return {}
        },
        created() {
        },

        methods: {},

        mounted() {

            const gauge = new Gauge('container', {
                percent: 0.75,
                width:200,
                height:200,
                range: {
                    color: '#30BF78',
                },
                indicator: {
                    pointer: {
                        style: {
                            stroke: '#D0D0D0',
                        },
                    },
                    pin: {
                        style: {
                            stroke: '#D0D0D0',
                        },
                    },
                },
                axis: {
                    label: {
                        formatter(v) {
                            return Number(v) * 100;
                        },
                    },
                    subTickLine: {
                        count: 3,
                    },
                },
                statistic: {
                    content: {
                        formatter: ({percent}) => `合格率: ${(percent * 100).toFixed(0)}%`,
                        style: {
                            color: 'rgba(0,0,0,0.65)',
                            fontSize: 18,
                        },
                    },
                },
            });

            gauge.render();
        }

    }
</script>

<style scoped>

</style>
